<template>
  <div>你当前点击了：{{ state.num }}</div>
  <button @click="btnClick">点击自增</button>
</template>

<script>
// reactive:用于定义响应式数据，类似于以前的data
// 使用：
// 1：导入  import {reactive} from 'vue'
// 2:在setup中定义
//    const state=reactive({num:0})
// state.num访问与修改
import { reactive } from 'vue' // 不是很重要，需要知道但实际使用较少
export default {
  setup () {
    // let num = 0 // 非响应式数据
    // function btnClick () {
    //   num++
    //   console.log(num)
    // }
    const state = reactive({ num: 0 }) // {num:0}
    function btnClick () {
      state.num++
    }
    return { state, btnClick }
  }
}
</script>
